<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>常用的js固定层代码_技术狂人</title>
<meta name="keywords" content="">
<meta name="description" content="网页中常会用到固定层这样的效果，可以放广告，可以放标签，可以放关注。非常感谢沧海一粟，是他帮我优化了代码，现在我把代码分享出来。">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="static/css/base.css" rel="stylesheet">
<link href="static/css/index.css" rel="stylesheet">
<link href="static/css/info.css" rel="stylesheet">
<link href="static/css/m.css" rel="stylesheet">
<script src="static/js/jquery.min.js"></script>
<script src="static/js/jquery.easyfader.min.js"></script>
<script src="static/js/hc-sticky.js"></script>
<script src="static/js/comm.js"></script>

<script type="text/javascript" src="static/js/ajax.js"></script>
</head>
<body>
<header class="header-navigation" id="header">
  <nav>
    <div class="logo"><a href="index.html">技术狂人</a></div>
    <h2 id="mnavh"><span class="navicon"></span></h2>
 <ul id="starlist">
<li><a href="index.html">首页</a></li>
 
 
<li><a href="about.html">关于我</a></li> 
 
 
<li><a href="life.html">慢生活</a></li> 
 
 
<li class="selected"><a href="study.html">学无止境</a></li> 
 
 
<li><a href="time.html">时间轴</a></li> 
 
    </ul>
    <div class="searchbox">
    <div id="search_bar" class="search_bar">
      <form id="searchform" action="/e/search/index.php" method="post" name="searchform">
        <input class="input" placeholder="想搜点什么呢.." type="text" name="keyboard" id="keyboard">
        <input type="hidden" name="show" value="title">
        <input type="hidden" name="tempid" value="1">
        <input type="hidden" name="tbname" value="news">
        <input type="hidden" name="Submit" value="搜索">
        <p class="search_ico"> <span></span></p>
      </form>
     </div> 
    </div>
  </nav>
</header>
<article>
  <main>
  <div class="infosbox">
    <div class="newsview">
      <h3 class="news_title">常用的js固定层代码</h3>
      <div class="bloginfo">
        <ul>
          <li class="author">
作者：冼子明</li>
          <li class="lmname">网站建设</li>
          <li class="timer">2018-06-06</li>
          <li class="view"><script src="static/js/-15_46_1.js"></script>人已阅读</li>
        </ul>
      </div>
      <div class="tags"></div>
      <div class="news_about"><strong>简介</strong>网页中常会用到固定层这样的效果，可以放广告，可以放标签，可以放关注。非常感谢沧海一粟，是他帮我优化了代码，现在我把代码分享出来。</div>
      <div class="news_con">         网页中常会用到固定层这样的效果，可以放广告，可以放标签，可以放关注。非常感谢&nbsp;<span style="color:#0099cc;"><span style="font-size:18px;">沧海一粟&nbsp;</span></span>，是他帮我优化了代码，现在我把代码分享出来。<br>&nbsp;<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><p>js代码如下：<br><br>if ($(&#39;#follow-us&#39;)){<br>&nbsp; &nbsp; var followUsPosition = $(&#39;#follow-us&#39;).offset().top;<br>&nbsp; &nbsp; window.onscroll = function () {<br>&nbsp; &nbsp; &nbsp; &nbsp; var nowPosition = &nbsp;document.documentElement.scrollTop;<br>&nbsp; &nbsp; &nbsp; &nbsp; if (nowPosition - followUsPosition &gt; 0 ) {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function () {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#39;#follow-us&#39;).attr(&#39;class&#39;,&#39;guanzhu gd&#39;);<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },150);<br>&nbsp; &nbsp; &nbsp; &nbsp; }else {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#39;#follow-us&#39;).attr(&#39;class&#39;,&#39;guanzhu&#39;);<br>&nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; };<br>}<br>});</p></div>&nbsp;<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><p>Html:&nbsp;&nbsp;&nbsp;<br><br>&nbsp; &lt;div class=&quot;guanzhu&quot; id=&quot;<span style="color:#FF0000;">follow-us</span>&quot;&gt;<br>&nbsp; &nbsp; &nbsp; &lt;h2 class=&quot;hometitle&quot;&gt;关注我们 么么哒！&lt;/h2&gt;<br>&nbsp; &nbsp; &nbsp; &lt;ul&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;sina&quot;&gt;&lt;a href=&quot;/&quot; target=&quot;_blank&quot;&gt;&lt;span&gt;新浪微博&lt;/span&gt;冼子明博客&lt;/a&gt;&lt;/li&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;tencent&quot;&gt;&lt;a href=&quot;/&quot; target=&quot;_blank&quot;&gt;&lt;span&gt;腾讯微博&lt;/span&gt;冼子明博客&lt;/a&gt;&lt;/li&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;qq&quot;&gt;&lt;a href=&quot;/&quot; target=&quot;_blank&quot;&gt;&lt;span&gt;QQ号&lt;/span&gt;476847113&lt;/a&gt;&lt;/li&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;email&quot;&gt;&lt;a href=&quot;/&quot; target=&quot;_blank&quot;&gt;&lt;span&gt;邮箱帐号&lt;/span&gt;dancesmiling@qq.com&lt;/a&gt;&lt;/li&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;wxgzh&quot;&gt;&lt;a href=&quot;/&quot; target=&quot;_blank&quot;&gt;&lt;span&gt;微信号&lt;/span&gt;ip3q_1987&lt;/a&gt;&lt;/li&gt;<br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;wx&quot;&gt;&lt;img src=&quot;images/wx.jpg&quot;&gt;&lt;/li&gt;<br>&nbsp; &nbsp; &nbsp; &lt;/ul&gt;<br>&nbsp; &nbsp; &lt;/div&gt;</p></div>&nbsp;<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><p><br>/*gd*/<br><br>.gd { width: 300px; top: 100px; z-index: 999; <span style="color:#FF0000;">position: fixed;</span> _position: absolute; _top:expression(documentElement.scrollTop + 0 + &quot;px&quot;);<br>_margin-top: 100px; }</p></div>       </div>
    </div>
    <div class="share">
<p class="diggit"><a href="JavaScript:makeRequest('/e/public/digg/?classid=15&id=46&dotop=1&doajax=1&ajaxarea=diggnum','EchoReturnedText','GET','');"> 很赞哦！ </a>(<b id="diggnum"><script type="text/javascript" src="static/js/-15_41_5.js"></script></b>)</p>

</div>
    <div class="nextinfo">
      <p>上一篇：<a href='45.html'>个人博客模板《绅士》后台管理</a></p>
      <p>下一篇：<a href='web.html'>返回列表</a></p>
    </div>
  </div>
  </main>
  <aside id="stickMe">
    <div class="r_box">     
      <div class="tuijian">
        <h2 id="tab"><a href="#" class="current">点击排行</a><a href="#">站长推荐</a></h2>       
     <div id="content">
        <ul style="display:block;">
          <li><a href="35.html" target="_blank">帝国cms列表页调用关键字tag标签 </a></li>
          <li><a href="37.html" target="_blank">个人博客模板《More》后台管理 </a></li>
          <li><a href="45.html" target="_blank">个人博客模板《绅士》后台管理 </a></li>
          <li><a href="43.html" target="_blank">帝国cms 栏目高级调用 高亮并且二级栏目增加样... </a></li>
          <li><a href="36.html" target="_blank">帝国cms去掉广告图片的高和宽 </a></li>
          <li><a href="" target="_blank">常用的js固定层代码 </a></li>
          <li><a href="40.html" target="_blank">个人博客模板《show time》后台管理 </a></li>
          <li><a href="39.html" target="_blank">帝国cms 如何使用静态页面？ </a></li>
          <li><a href="38.html" target="_blank">帝国cms结合项如何实现多条件查询 </a></li>
          <li><a href="44.html" target="_blank">帝国cms 列表页调用子栏目，没有则不显示栏目... </a></li>
          <li><a href="42.html" target="_blank">个人博客用帝国cms 自定义页面 灵动标签调用网... </a></li>
          <li><a href="41.html" target="_blank">帝国cms 封面模板标题调用栏目别名的方法 </a></li>
        </ul>             
        <ul>
          <li><a href="35.html" target="_blank">帝国cms列表页调用关键字tag标签 </a></li>
        </ul>
       </div>
      </div>
 <div class="wdxc">
        <h2>图文精选</h2>
        <ul>
                     <li><a href="32.html" title="鼠标悬停图片、文字css3效果" target="_blank"><img src="static/picture/12f33cc4c1c692e2fa0017275fcc265f.jpg"></a></li>
                     <li><a href="29.html" title="IE6到底哪里不好？你还继续用IE6吗？" target="_blank"><img src="static/picture/b1d8cde248671b1e75ef302609595b1f.jpg"></a></li>
                     <li><a href="33.html" title="从摄影作品中获取网页颜色搭配技巧" target="_blank"><img src="static/picture/9b5abf501a88ea5d80c3ccd9978358c9.jpg"></a></li>
                     <li><a href="28.html" title="使用ASPCMS建站网站被黑" target="_blank"><img src="static/picture/2ab0bdcc2d40794f183031053dd1a4d2.jpg"></a></li>
                     <li><a href="27.html" title="帝国cms常用标签调用方法总结（不得不收藏哦）" target="_blank"><img src="static/picture/a0b65d3d8160f90f6556c4dfa3a85a59.jpg"></a></li>
                     <li><a href="30.html" title="css技巧以及经验总结" target="_blank"><img src="static/picture/ce3c6881c5f27e55588f8f9843d8be38.jpg"></a></li>
                   </ul>
      </div>
<div class="cloud">
      <h2>标签云</h2>
      <ul>
 <a href="tags.html" target="_blank">云南</a>      </ul>
    </div>
      <div class="guanzhu">
        <h2>关注我 么么哒</h2>
        <ul>
          <img src="static/picture/wx.png">
        </ul>
      </div>
    </div>
  </aside>
</article>
<footer>
  <p>Design by <a href="index.html" target="_blank">技术狂人</a> <a href="http://beian.miit.gov.cn/get="_blank">粤ICP备2024236460号-4</a></p>
</footer>
<a href="#" class="cd-top">Top</a><script src="static/js/js.js"></script></body>
</html>
